<template>
  <div class="home-page">
    <div class="title">
      镇海区总投资情况
    </div>
    <el-row :gutter="20" style="margin-bottom: 45px">
      <el-col :span="6">
        <div class="card card1 f-r j-b">
          <div class="left">
            <div class="name">政府投资项目数</div>
            <div class="value-box">
              <span class="value">4689</span>
              <span class="unit">个</span>
            </div>

            <div class="f-r a-c">
              <span class="text">更新时间：</span>
              <span class="color-l">08-10</span>
            </div>
          </div>
          <img class="icon" src="@/assets/icon1.png" alt="">
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card card1 f-r j-b">
          <div class="left">
            <div class="name">企业投资项目数</div>
            <div class="value-box">
              <span class="value">1089</span>
              <span class="unit">个</span>
            </div>

            <div class="f-r a-c">
              <span class="text">更新时间：</span>
              <span class="color-l">08-10</span>
            </div>
          </div>
          <img class="icon" src="@/assets/icon2.png" alt="">
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card card1 f-r j-b">
          <div class="left">
            <div class="name">政府投资项目总额</div>
            <div class="value-box">
              <span class="value">￥89.12</span>
              <span class="unit">亿</span>
            </div>

            <div class="f-r a-c">
              <span class="text">更新时间：</span>
              <span class="color-l">08-10</span>
            </div>
          </div>
          <img class="icon" src="@/assets/icon3.png" alt="">
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card card1 f-r j-b">
          <div class="left">
            <div class="name">企业投资项目总额</div>
            <div class="value-box">
              <span class="value">￥20.41</span>
              <span class="unit">亿</span>
            </div>

            <div class="f-r a-c">
              <span class="text">更新时间：</span>
              <span class="color-l">08-10</span>
            </div>
          </div>
          <img class="icon" src="@/assets/icon4.png" alt="">
        </div>
      </el-col>
    </el-row>
    <div class="title">
      镇海区投资项目审批办件情况
    </div>
    <el-row :gutter="20" style="margin-bottom: 45px">
      <el-col :span="6">
        <div class="card card2 f-r j-b">
          <div class="left">
            <div class="name">本年度办件量</div>
            <div class="value-box">
              <span class="value">4689</span>
            </div>
          </div>
          <div class="icon icon1 f-r a-c j-c">
            <img src="@/assets/icon5.png" alt="">
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card card2 f-r j-b">
          <div class="left">
            <div class="name">本月办件量</div>
            <div class="value-box">
              <span class="value">4689</span>
            </div>
          </div>
          <div class="icon icon2 f-r a-c j-c">
            <img src="@/assets/icon6.png" alt="">
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card card2 f-r j-b">
          <div class="left">
            <div class="name">评价审批时长</div>
            <div class="value-box">
              <span class="value">4689</span>
              <span class="unit">小时</span>
            </div>
          </div>
          <div class="icon icon3 f-r a-c j-c">
            <img src="@/assets/icon7.png" alt="">
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card card2 f-r j-b">
          <div class="left">
            <div class="name">项目审批周期时长</div>
            <div class="value-box">
              <span class="value">4689</span>
              <span class="unit">小时</span>
            </div>
          </div>
          <div class="icon icon4 f-r a-c j-c">
            <img src="@/assets/icon8.png" alt="">
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="title">
      镇海区投资项目审批办件情况
    </div>
    <div class="card card3">
      <v-chart style="width: 100%;height: 100%" :option="option3" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      option3: {
        legend: {
          show: true,
          orient: 'horizontal',
          icon: 'circle',
          bottom: 20,
          x: 'center',
          data: ['本年度办件量', '当月办件量'],
          itemGap: 20,
          textStyle: {
            color: '#282D32',
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        grid: {
          top: 80,
          left: 32,
          right: 32,
          bottom: 80,
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(238, 238, 238, 1)'
            }
          },
          axisLabel: {
            color: 'rgba(43,48,52,0.4)',
            fontSize: 12
          },
          axisTick: {
            show: false
          },
          data: ['区发改局', '区经信局', '区资规分局', '区建交局', '区综合执法局', '区生态环境局', '区农业农村局', '区气象局']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'rgba(43,48,52,0.4)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(238, 238, 238, 1)'
            }
          }
        },
        series: [
          {
            name: '本年度办件量',
            data: [20, 30, 40, 50, 70, 60, 40],
            type: 'bar',
            itemStyle: {
              color: '#F9978A'

            },
            barWidth: 16
          },
          {
            name: '当月办件量',
            data: [20, 30, 40, 50, 70, 60, 40],
            type: 'bar',
            itemStyle: {
              color: '#3860B9'

            },
            barWidth: 16
          }
        ]
      }
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.home-page {
  .title {
    font-size: 32px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #202224;
    margin-bottom: 24px;
  }
  .card {
    background: #FFFFFF;
    box-shadow: 6px 6px 54px 1px rgba(0,0,0,0.05);
    border-radius: 14px 14px 14px 14px;
  }
  .card1 {
    width: 100%;
    height: 161px;
    padding: 16px;
    color: #202224;
    font-size: 16px;
    .name {
      font-weight: 400;
      line-height: 16px;
      margin-bottom: 11px;
    }
    .value {
      font-size: 36px;
      line-height: 44px;
    }
    .value-box {
      margin-bottom: 32px;

    }
    .unit {
      font-size: 16px;
      line-height: 16px;
    }
    .text {
      color: #12163C;
    }
    .color-l {
      color: #00B69B;
    }
    .icon {
      width: 60px;
      height: 60px;
    }
  }
  .card2 {
    width: 100%;
    height: 116px;
    padding: 29px 32px;
    color: #777777;
    font-size: 16px;
    .name {
      font-weight: 400;
      line-height: 16px;
      margin-bottom: 11px;
    }
    .value {
      font-size: 31px;
      line-height: 38px;
    }
    .unit {
      font-size: 20px;
      line-height: 20px;
    }
    .icon {
      width:65px;
      height: 65px;
      border-radius: 50%;
      img {
        width: 42px;
        height: 42px;
      }
    }
    .icon1 {
      background: linear-gradient(360deg, #24BDB9 0%, #44E894 100%);
    }
    .icon2 {
      background: linear-gradient(360deg, #FF6297 0%, #FFA869 100%);
    }
    .icon3 {

      background: linear-gradient(360deg, #EC8C02 0%, #F1E04D 100%);
    }
    .icon4 {
      background: linear-gradient(360deg, #EB7C98 0%, #7877FE 100%);
    }
  }
  .card3 {
    height: 445px;
    margin-bottom: 20px;
  }
}
</style>
